<template>
	<div class="axios-container">
		<p>{{result_Data01}}</p>
		<button @click="requestFun_01">发起请求</button>
		<br />
		
		<p>{{result_Data02}}</p>
		<button @click="requestFun_02">get</button>
		<br />
		
		<p>{{result_Data03}}</p>
		<button @click="requestFun_03">post</button>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				request_method:'GET',
				request_url_get  : 'http://www.liulongbin.top:3006/api/getbooks',
				request_url_post : 'http://www.liulongbin.top:3006/api/post',
				request_id     : 1      ,
				request_name   : '哈哈' ,
				request_gender : '男'   ,
				result_Data01:'postFun_01目前无数据',
				result_Data02:'postFun_02目前无数据',
				result_Data03:'postFun_03目前无数据'
			}
		},
		methods:{
			// async/await
			async requestFun_01(){
				// 调用 axios 方法得到的返回值是 Promise 对象
				// 使用async/await则可以把真实数据从Promise 对象中解构出来
				// 可以直接使用data，也可以用 : 起别名
				const {data : res } = await this.axios({
					// 请求方式
					method: this.request_method,
					// 请求的地址
					url: this.request_url_get,
					// URL 中的查询参数（get，delete……）
					params: {
						id: this.request_id
					},
					// 请求体参数（post）
					data: {
						
					},
				  //返回并处理
				})
				this.result_Data01=res;
				console.log(res);
			},
			async requestFun_02(){
				//axios的get方法
				const {data : res } = await this.axios.get(
					this.request_url_get,
					{
						params: {
							id: this.request_id
						}
					}
				);
				this.result_Data02=res;
				console.log(res);
			},
			async requestFun_03(){
				//axios的post方法
				const {data : res } = await this.axios.post(
					this.request_url_post,
					{
						name   : this.request_name,
						gender : this.request_gender
					}
				);
				this.result_Data03=res;
				console.log(res);
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.axios-container {
		padding: 0 20px 20px;
		background-color: red;
		flex: 1;
	}
	
</style>